<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            /* margin: 0; */
            padding: 0;

        }

        #box {
            width: 500px;
            height: 500px;
            background-color: rgba(44, 148, 207, 0.3);
            margin: auto;
            margin-top: 5em;
        }

        div {
            margin-bottom: 50px;
        }

        ol {
            list-style: none;
            display: flex;
        }

        li {
            width: 30px;
            height: 30px;
            /* background-color: crimson; */
            border-radius: 50%;
            margin-left: 10px;
            text-align: center;
            line-height: 30px;
            color: #fff;
        }

        #cunputer,
        #lucky,
        #result {
            display: flex;
            align-items: center;
        }



        #result_p {
            width: 300px;
            border-radius: 0;
            background-color: transparent;
            line-height: 32px;
            font-size: 30px;
            margin-left: 2em;
        }

        span {
            display: block;
            width: 400px;
            height: 100px;
            background-color: aquamarine;
            margin: 10px;
            display: flex;
            align-items: center;
        }

        p {
            margin-left: 10px;
            margin-right: 20px;
        }
    </style>
</head>

<body>
    <div id='box'>
        <div id="cunputer">
            <h3>机选号码</h3>
            <ol></ol>
        </div>
        <div id="lucky">
            <h3>自选号码</h3>
            <ol></ol>
        </div>
        <div id="result">
            <h3>结果</h3>
            <p id="result_p"></p>
        </div>
        <input type="text" placeholder="自选号码" id="text">
        <input type="button" value="兑奖">
        <input type="button" value="机选一注">
        <span></span>
    </div>
    <script>
        let cunputer = document.querySelectorAll('ol')[0];
        let lucky = document.querySelectorAll('ol')[1];
        let result = document.getElementById('result_p');
        let text = document.querySelectorAll('input')[0];
        let redeem = document.querySelector('[value="兑奖"]');
        let selection = document.querySelector('[value="机选一注"]');
        let span = document.querySelector('span');
        console.log(text, redeem, selection);

        function technology() {
            let s = new Set();
            while (s.size < 6) {
                s.add(random(1, 33));
            }
            let redball = [...s].sort((a, b) => a - b);
            let blueball = random(1, 16);
            return [redball, blueball];
        }
        let [cunputerredball, cunputerblueball] = technology();

        function rende(arr, number, ele) {
            arr.sort((a, b) => a - b);
            let x = arr.map(item => `<li style='background-color:red;'>${item}</li>`).join('');
            ele.innerHTML = x;
            ele.innerHTML += `<li style='background-color:blue;'>${number}</li>`;

        }

        selection.disabled = 'none'
        redeem.disabled = 'none';
        selection.onclick = function () {
            redeem.disabled = 'none'
            text.disabled = 'none'
            //用户结果
            let [luckyredball, luckyblueball] = technology();
            //引用用户结果
            rende(luckyredball, luckyblueball, lucky);
            //机选结果
            rende(cunputerredball, cunputerblueball, cunputer);
            //判定用户和机选的数量
            let ballresult = luckyredball.filter(function (item) {
                return cunputerredball.indexOf(item) != -1;
            }).length;
            console.log(ballresult);

            //打印结果
            if (result == 6 && cunputerblueball == luckyblueball) {
                console.log('这辈子不愁了');
                result.innerText = '这辈子不愁了'
            } else if (result == 6) {
                console.log('半辈子不愁');
                result.innerText = '半辈子不愁'
            } else if (result == 5 && cunputerblueball == luckyblueball) {
                console.log('3000元，一个月工资了');
                result.innerText = '3000元，一个月工资了'
            } else if (result == 5 || result == 4 && cunputerblueball == luckyblueball) {
                console.log('吃顿饭￥200');
                result.innerText = '吃顿饭￥200'
            } else if (result == 4 || result == 3 && cunputerblueball == luckyblueball) {
                console.log('小奖励￥10，请继续');
                result.innerText = '小奖励￥10，请继续'
            } else if (result == 2 && cunputerblueball == luckyblueball || result == 1 && cunputerblueball ==
                luckyblueball ||
                cunputerblueball == luckyblueball) {
                console.log('六等奖（微笑）');
                result.innerText = '六等奖（微笑）'
            } else {
                console.log('哭死你');
                result.innerText = '哭死你'
            }
        }

        let arr_one = [];
        let arr_twow = []
        redeem.onclick = function () {

            rende(cunputerredball, cunputerblueball, cunputer);
            rende(arr_one, arr_twow, lucky); //判定用户和机选的数量
            let ballresult = arr_one.filter(function (item) {
                return cunputerredball.indexOf(item) != -1;
            }).length;
            console.log(ballresult);

            //打印结果
            if (result == 6 && cunputerblueball == arr_one) {
                console.log('这辈子不愁了');
                result.innerText = '这辈子不愁了'
            } else if (result == 6) {
                console.log('半辈子不愁');
                result.innerText = '半辈子不愁'
            } else if (result == 5 && cunputerblueball == arr_one) {
                console.log('3000元，一个月工资了');
                result.innerText = '3000元，一个月工资了'
            } else if (result == 5 || result == 4 && cunputerblueball == arr_one) {
                console.log('吃顿饭￥200');
                result.innerText = '吃顿饭￥200'
            } else if (result == 4 || result == 3 && cunputerblueball == arr_one) {
                console.log('小奖励￥10，请继续');
                result.innerText = '小奖励￥10，请继续'
            } else if (result == 2 && cunputerblueball == arr_one || result == 1 && cunputerblueball ==
                arr_one ||
                cunputerblueball == arr_one) {
                console.log('六等奖（微笑）');
                result.innerText = '六等奖（微笑）'
            } else {
                console.log('哭死你');
                result.innerText = '哭死你'
            }
        }




        document.onkeydown = function (event) {
            // console.log(event.keyCode);
            //判断按下回车
            let p = document.createElement('p');
            if (event.keyCode == 13) {
                //判定是否有值
                if (text.value) {
                    if (text.value >= 1 && text.value <= 33 && arr_one.length < 6) {
                        let result = arr_one.some(item => arr_one.indexOf(text.value) !== -1);
                        if (!result) {
                            p.innerText = text.value;
                            arr_one.push(text.value);
                            span.appendChild(p);
                        }
                    } else {
                        if (text.value <= 16) {
                            p.innerText = text.value;
                            span.appendChild(p);
                            arr_twow.push(text.value);
                            console.log(arr_one, arr_twow);
                            redeem.disabled = false;
                            text.disabled = 'none';
                            selection.disabled = false;

                        }
                    }
                    text.value = '';


                }
                console.log(span, arr_twow);
            }

        }


        //随机数函数
        function random(min, max) {
            if (!max) {
                [max, min] = [min, 0];
            }
            let number = parseInt(Math.random(min, max) * (max - min + 1) + min);
            return number;
        }
    </script>
</body>

</html>